<template>
  <div class="com-broadcast">
    <el-table
      :data="broadcast"
      border
      class="table"
      height="100%"
      :span-method="mergeSameRows"
    >
      <el-table-column label="中心播报" align="center">
        <el-table-column
          label="今日区域排名"
          prop="rank"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column label="社区名称" prop="communityName" align="center">
        </el-table-column>
        <el-table-column label="四率完成情况" align="center">
          <el-table-column
            label="日活率"
            prop="four.num1"
            align="center"
            width="60"
          >
          </el-table-column>
          <el-table-column
            label="任务完成率"
            prop="four.num2"
            align="center"
            width="60"
          >
          </el-table-column>
          <el-table-column
            label="重点对象关注率"
            prop="four.num3"
            align="center"
            width="75"
          >
          </el-table-column>
          <el-table-column
            label="时间按期办理率"
            prop="four.num4"
            align="center"
            width="75"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="四率未按时完成网格"
          align="center"
          width="60"
        ></el-table-column>
        <el-table-column
          label="四率未按时完成网格员"
          align="center"
          width="75"
        ></el-table-column>
        <el-table-column
          label="四率逾期事件"
          align="center"
          width="60"
        ></el-table-column>
        <el-table-column label="四跑道近7天无事件流转的网格" align="center" width="75">
        </el-table-column>
        <el-table-column
          label="四跑道今日事件数"
          prop="nowEventNum"
          align="center"
          width="60"
        >
        </el-table-column>
        <el-table-column label="多跨事项数" align="center" width="60"> </el-table-column>
        <el-table-column label="多跨事项涉及板块" align="center" width="60">
        </el-table-column>
        <el-table-column label="每日调度" align="center">
          <el-table-column label="下级网格" align="center" width="50"> </el-table-column>
          <el-table-column label="调度情况" align="center" width="50"> </el-table-column>
        </el-table-column>
        <el-table-column label="村、社区电诈事件发生情况" align="center">
          <el-table-column label="数量（起）" align="center" width="60"> </el-table-column>
          <el-table-column label="金额（万元）" align="center" width="100">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "comBroadcast",
  data() {
    return {
      broadcast: [
        {
          rank: 1,
          communityName: "百成社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: 2,
        },
        {
          rank: 2,
          communityName: "金州社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: null,
        },
        {
          rank: 3,
          communityName: "九龙社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: 2,
        },
        {
          rank: 4,
          communityName: "驷马社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: null,
        },
        {
          rank: 5,
          communityName: "锦城社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: null,
        },
        {
          rank: 6,
          communityName: "迎宾社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: null,
        },
        {
          rank: 7,
          communityName: "安康社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: 1,
        },
        {
          rank: 8,
          communityName: "凤凰社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: 1,
        },
        {
          rank: 9,
          communityName: "永兴社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: null,
        },
        {
          rank: 10,
          communityName: "红光社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: null,
        },
        {
          rank: 11,
          communityName: "盛山社区",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: null,
        },
        {
          rank: 12,
          communityName: "南元村",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: null,
        },
        {
          rank: 13,
          communityName: "川心村",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: null,
        },
        {
          rank: "汇总",
          communityName: "",
          four: {
            num1: "100%",
            num2: "100%",
            num3: "100%",
            num4: "100%",
          },
          nowEventNum: 6,
        },
        {
          rank: "今日高频事项top5：①消防安全②市容市貌更新③突发事件应对④反诈宣传⑤能源管理",
        },
        {
          rank: "今日本辖区无重大案事件发生，社会面平稳可控",
        },
      ],
    };
  },
  methods: {
    mergeSameRows({ row, column, rowIndex, columnIndex }) {
      if (
        rowIndex === this.broadcast.length - 1 ||
        rowIndex === this.broadcast.length - 2
      ) {
        if (column.property === "rank") {
          return [1, 17];
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.com-broadcast {
  width: 100%;
  height: 100%;
}
</style>
